<template>
  <div class="main">
    <div class="bigBox"></div>
    <div class="w">
      <div class="highSchool">
        <div class="logoImg"><img :src="$store.state.api+'?path='+schoolMsg.icon" alt="" /></div>
        <div class="brief">
          <h4>{{schoolMsg.name}}</h4>
          <p>{{schoolMsg.brief}}</p>
        </div>
      </div>

      <div class="lessonName">
        <div class="listBox">
          <ul>
            <li v-for="(item,index) in course" :key="index">
              <router-link :to="{ path: 'lessonIntroduce/' + item.id }">
                <div class="imgBox"><img :src="$store.state.api + '?path=' + item.fm" alt="" /></div>
                <div class="textBox">
                  <h4>{{item.name}}</h4>
                  <p>30节课 · 23小时 · 996人在学</p>
                  <div class="schoolName">
                    <span v-if="item.School">{{ item.School.name }}</span
                      ><span>被213次引用</span>
                  </div>
                </div>
                <span class="best">{{item.name}}</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _axios } from '@/api/_axios';
import { SCHOOLLIST,COURSELIST } from '@/api/api';

export default {
  components: {
  },

  data() {
    return {
        schoolMsg:{},
        course:[]
    };
  },
  mounted(){
      this.getDetail()
  },
  methods: {
    getDetail(){
      _axios(SCHOOLLIST+'/'+this.$route.params.id,{},'get').then(res => {
          console.log('详情',res)
          this.schoolMsg = res.data
          this.getCourse(res.data.id)
      })
    },
    getCourse(id) {
      _axios(
        COURSELIST,
        {
          page: 1,
          limit: 8,
          schoolId:id
        },
        "get"
      ).then((res) => {
        console.log("课程", res);
        this.course = res.data;
      });
    },
  },
};
</script>


<style scoped>
.bigBox {
  width: 100%;
  height: 258px;
  background: url(../assets/bg-b.png) no-repeat;
  background-size: 100% 100%;
}
.main .w {
  margin-top: -100px;
}
.highSchool {
  width: 100%;
  height: 320px;
  width: 100%;
  padding: 45px 45px 30px;
  box-sizing: border-box;
  margin-bottom: 50px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 16, 36, 0.05);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.highSchool .logoImg {
  width: 198px;
  height: 198px;
}
.highSchool .logoImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.highSchool .brief {
  width: 840px;
}
.highSchool .brief h4 {
  font-size: 28px;
  color: #333333;
  margin-bottom: 24px;
}
.highSchool .brief p {
  font-size: 16px;
  color: #666666;
  line-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
</style>
